<template>
  <el-dialog title="签收"
             top="20vh"
             width="600px"
             class="dialog-box"
             append-to-body
             :visible="visible"
             @update:visible="handleVisible">
    <el-form ref="ruleForm"
             label-width="90px"
             :model="form">
      <el-form-item label="说明"
                    prop="signDesc">
        <el-input v-model="form.signDesc"
                  type="textarea"
                  maxlength="200"
                  show-word-limit />
      </el-form-item>
      <el-form-item label="上传照片"
                    prop="signPics">
        <OrderSignPics :value="value"
                       :is-all="isAll"
                       @uploadProgress="uploadProgress"
                       @files="handleSignPicsInput" />
      </el-form-item>
      <el-form-item label="延期原因"
                    prop="delayReason">
        <el-radio-group v-model="form.delayReason">
          <el-radio :label="0">无延期</el-radio>
          <el-radio :label="1">正常延期</el-radio>
          <el-radio :label="2">客户要求</el-radio>
          <el-radio :label="3">商务要求</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否拒签"
                    prop="exception">
        <el-radio-group v-model="form.exception">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <span v-if="form.exception">
        <el-form-item label="拒签数"
                      prop="exceptionNum">
          {{form.exceptionNum}}
        </el-form-item>
        <el-form-item label="拒签照片"
                      prop="signRefusePics">
          <OrderSignPics :value="value"
                         :is-all="isAll"
                         @uploadProgress="uploadProgress"
                         @files="handleRefuseSignPicsInput" />
        </el-form-item>
      </span>
    </el-form>
    <div slot="footer">
      <el-button type="default"
                 @click="handleClose">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 :disabled="submitButtonDisabled"
                 @click="handleSubmit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import OrderMixin from "./order.mixin";
import OrderSignPics from "@/components/order/OrderSignPics";
export default {
  name: "OrderSignSubmit",
  components: {
    OrderSignPics
  },
  mixins: [OrderMixin],
  props: {
    value: Object,
    fulfill: Function,
    visible: Boolean,
    isAll: [Boolean, Number],
    beforeSubmit: Function,
    goodsList: Array,
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      submitButtonDisabled: null,
      form: {
        signDesc: null,
        delayReason: null,
        exception: 0,
        exceptionNum: 0,
        signRefusePics: [],
        signPics: []
      }
    };
  },
  watch: {
    goodsList () {
      this.$nextTick(() => {
        let totalexceptionQuantity = 0;
        this.goodsList.length && this.goodsList.map(item => {
          if (item.exceptionQuantity) {
            console.log('======<nextTick', item)
            let refuseTotalNum = 0;
            item.rejects.length && item.rejects.map(item => {
              refuseTotalNum += Number(item.quantity);
            })
            totalexceptionQuantity += Number(refuseTotalNum);
          }
        })
        this.form.exceptionNum = totalexceptionQuantity;
      });
    }
  },
  created () { },
  methods: {
    handleSignPicsInput (signPics) {
      this.form.signPics = signPics;
    },
    handleRefuseSignPicsInput (signRefusePics) {
      this.form.signRefusePics = signRefusePics;
    },
    uploadProgress (value) {
      this.submitButtonDisabled = value
    },
    handleBeforeSubmit () {
      if (typeof this.beforeSubmit !== "function") {
        return true;
      }
      return this.beforeSubmit(this.form);
    },
    handleSubmit () {
      if (!this.handleBeforeSubmit()) {
        console.log("Handle before submit false", JSON.stringify(this.form));
        return;
      }
      this.$emit("submit", this.form);
    },
    handleClose () {
      this.$emit("update:visible", false);
    },
    handleVisible (visible) {
      this.$emit("update:visible", visible);
    }
  }
};
</script>
<style scoped>
.dialog-box >>> .el-dialog__body {
  max-height: 460px !important;
  overflow: auto !important;
}
</style>
